
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>16110100521_谭创浩</title>
		
		<style>
			ul{list-style: none;}
			a{text-decoration: none;color: white;}
			.box{
				margin: 0;
				padding: 0;
				width: 780px;
				height: 650px;
				position: relative;
				}
			.b1{
				position: absolute;
				margin-left: -20px;
			}
			.b2{
				position: absolute;
				top: 203px;
				margin-top:10px ;
				margin-left: -20px;
			}
			.b3{
				position: absolute;
				top:436px;
				margin-left:-20px ;
			}
			.b4{
				position: absolute;
				top: 0;
				left: 400px;
				margin-left: 10px;
			}
			.b5{
				position: absolute;
				top: 203px;
				left: 400px;
				margin: 10px;
			}
			.t{
				width: 360px;
				height: 30px;
				background-color: rgba(0,0,0,0.5);
				margin-top: -34px;   /*字看到上去了,再加上字的大小-2px,整块带颜色的p就都上去了*/
				position: relative;
			}
			.t1{
				height: 30px;
				line-height: 30px;
				margin-left:64px;
			}
		</style>
		
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="b1">
					<a href="#"><img src="1.jpg"/></a>
					<p class="t"><a class="t1" href="#">燕赵遍地有古塔</a></p>
				</li>
				<li class="b2">
					<a href="#"><img src="2.jpg"/></a>
					<p class="t"><a class="t1" href="#">解读贵州岩画</a></p>
				</li>
				<li class="b3">
					<a href="#"><img src="3.jpg"/></a>
					<p class="t"><a class="t1" href="#">乾陵：天下第一陵</a></p>
				</li>
				<li class="b4">
					<a href="#"><img src="4.jpg"/></a>
					<p class="t"><a class="t1" href="#">磴口：正在上演的地址史诗</a></p>
				</li>
				<li class="b5">
					<a href="#"><img src="5.jpg"/></a>
					<p class="t"><a class="t1" href="#">大江寻源</a></p>
				</li>
			</ul>
		</div>
	</body>
</html>

